<template>
  <div>
    <a-card title="查询条件">
      <a-row>
        <a-col class="param_item_label" :span="2">用户名称：</a-col>
        <a-col :span="3">
          <a-input v-model:value="param.name"/>
        </a-col>
        <a-col :span="1"/>
      </a-row>
      <div class="operation_row">
        <a-button type="primary" @click="getPage(1,10)">查询</a-button>
      </div>
    </a-card>
    <br>
    <a-card title="用户列表">
      <a-table rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading"
               bordered>
        <template #action="{ record }">
          <span>
            <router-link :to="`/u/${record.domain}`">访问主页</router-link>
            <a-divider type="vertical"/>
            <a @click="openRoleModal(record)">角色管理</a>
          </span>
        </template>
      </a-table>
    </a-card>
    <!-- 角色管理弹窗 -->
    <a-modal v-model:visible="roleModalShow" :title="`调整[${updateRoleUser.name}]角色`" @ok="commitUpdateRole">
      <a-tree :tree-data="roleTree" v-model:checkedKeys="treeChecked" :replaceFields="replaceFields"
              :checkStrictly="true" defaultExpandAll checkable>
      </a-tree>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { GetRoleTree, GetUserRole, UpdateUserRoleRelation } from '@/service/auth'
import { GetUserPage } from '@/service/user'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      param: {
        name: ''
      },
      loading: true,
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: async (page, size) => {
          await methods.getPage(page, size)
        }
      },
      columns: [{
        title: 'ID',
        dataIndex: 'id',
        width: '30%'
      }, {
        title: '名称',
        dataIndex: 'name',
        width: '20%'
      }, {
        title: '域名',
        dataIndex: 'domain',
        width: '30%'
      }, {
        title: '操作',
        key: 'action',
        slots: {
          customRender: 'action'
        }
      }],
      roleModalShow: false,
      updateRoleUser: {
        id: '',
        name: ''
      },
      replaceFields: {
        key: 'id',
        title: 'name',
        children: 'childList'
      },
      roleTree: [],
      treeChecked: {
        checked: [],
        halfChecked: []
      }
    })

    const methods = reactive({
      getPage: async (page, size) => {
        state.loading = true
        const {
          count,
          list
        } = await GetUserPage(state.param.name, page, size)
        state.pagination.current = page
        state.pagination.pageSize = size
        state.pagination.total = count
        state.dataSource = list
        state.loading = false
      },
      openRoleModal: async (user) => {
        state.loading = true
        state.roleTree = await GetRoleTree()
        state.treeChecked.checked = await GetUserRole(user.id)
        state.updateRoleUser.id = user.id
        state.updateRoleUser.name = user.name
        state.roleModalShow = true
        state.loading = false
      },
      commitUpdateRole: async () => {
        await UpdateUserRoleRelation(state.updateRoleUser.id, state.treeChecked.checked)
        proxy.$message.success(`修改[${state.updateRoleUser.name}]角色成功！`)
        state.roleModalShow = false
        await methods.getPage(1, 10)
      }
    })

    onMounted(async () => {
      await methods.getPage(1, 10)
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  }
})
</script>

<style scoped>

</style>
